<template>
  <div class="middle-container">
    <el-card style="width: 100%; height: 540px" shadow="hover">
      <template #header>
        <!-- 顶部 -->
        <div class="card-header">
          <div class="middle-nav">
            <!-- 菜单 -->
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              :ellipsis="false"
              @select="handleSelect"
            >
              <el-menu-item index="1">销售额</el-menu-item>
              <el-menu-item index="2">访问量</el-menu-item>
            </el-menu>

            <!-- 单选按钮 -->
            <div class="right">
              <el-radio-group v-model="radio" size="large">
                <el-radio-button label="今日" value="today" />
                <el-radio-button label="昨日" value="yesterday" />
                <el-radio-button label="本周" value="thisWeek" />
                <el-radio-button label="本月" value="thisMonth" />
              </el-radio-group>

              <!-- 日期选择器 -->
              <el-date-picker
                v-model="value"
                type="datetimerange"
                :shortcuts="shortcuts"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </div>
          </div>
        </div>
      </template>

      <!-- 中间 -->
      <div class="middle-main">
        <!-- 图表 -->
        <div class="chart">
          <v-chart :option="options1" v-if="activeIndex === '2'"></v-chart>
          <v-chart :option="options2" v-if="activeIndex === '1'"></v-chart>
        </div>
        <!-- 排名 -->
        <div class="rank">
          <h4>排行榜</h4>
          <ul class="rank-list">
            <li
              v-for="item in visitRank1"
              :key="item.no"
              v-if="activeIndex === '1'"
            >
              <span :class="{ top3: item.no <= 3 }">{{ item.no }}</span>
              <div class="rank-item">
                <p>{{ item.title }}</p>
                <p>{{ item.sales }}</p>
              </div>
            </li>
            <li
              v-for="(item, index) in visitRank2"
              :key="index"
              v-if="activeIndex === '2'"
            >
              <span :class="{ top3: item.no <= 3 }">{{ item.no }}</span>
              <div class="rank-item">
                <p>{{ item.title }}</p>
                <p>{{ item.sales }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';

import axios from 'axios';

// 菜单参数
const activeIndex = ref('1');
const handleSelect = (index) => {
  activeIndex.value = index;
};
// 单选按钮参数
const radio = ref('today');
// 日期选择器参数
const value = ref('');
const shortcuts = [
  {
    text: '上周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 7);
      return [start, end];
    },
  },
  {
    text: '上一个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 1);
      return [start, end];
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 3);
      return [start, end];
    },
  },
];
// 年度销售额图表参数
const options1 = ref({
  title: {
    text: '年度销售额',
    textStyle: {
      fontSize: 14,
    },
    left: 0,
    top: 0,
  },
  xAxis: {
    type: 'category',
    data: [],

    axisTick: {
      show: true, // 显示刻度线
      alignWithLabel: true, // 刻度与标签对齐
      inside: false, // 刻度线朝外，true 为朝内
    },
  },
  yAxis: {
    type: 'value',
  },
  grid: {
    left: 10,
    right: 0,
    top: 50,
    bottom: 0,
  },
  series: [
    {
      type: 'bar',
      data: [],
      barWidth: 24,
      color: '#94E2FF',
    },
  ],
});
// 年度访问量图表参数
const options2 = ref({
  title: {
    text: '年度访问量',
    textStyle: {
      fontSize: 14,
    },
    left: 0,
    top: 0,
  },
  xAxis: {
    type: 'category',
    data: [],

    axisTick: {
      show: true, // 显示刻度线
      alignWithLabel: true, // 刻度与标签对齐
      inside: false, // 刻度线朝外，true 为朝内
    },
  },
  yAxis: {
    type: 'value',
  },
  grid: {
    left: 10,
    right: 0,
    top: 50,
    bottom: 0,
  },
  series: [
    {
      type: 'bar',
      data: [],
      barWidth: 24,
      color: '#94E2FF',
    },
  ],
});
//年度销售排行榜
const visitRank1 = ref([]);
//年度访问量排行榜
const visitRank2 = ref([]);

// 获取真实数据
axios.get('http://project.x-zd.net:3001/apis/saledata').then((res) => {
  //更新图表数据
  options1.value.xAxis.data = res.data.saleFulleYearAxis;
  options1.value.series[0].data = res.data.saleFulleYear;
  options2.value.xAxis.data = res.data.visitFullYeadAxis;
  options2.value.series[0].data = res.data.visitFullYear;

  //更新排行榜数据
  visitRank1.value = res.data.saleRank;
  visitRank2.value = res.data.visitRank;
});
</script>

<style scoped>
.middle-container {
  padding: 10px;
  width: 1200px;
}

::v-deep .el-card__header {
  padding: 0;
}

.middle-nav {
  position: relative;

  padding-left: 40px;
  height: 60px;
  background-color: #fff;
}

.right {
  display: flex;
  align-items: center;
  gap: 20px;

  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
}

.middle-main {
  display: flex;
  justify-content: space-between;
}

.chart {
  width: 788px;
  height: 434px;
}

.rank-list {
  width: 337px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}

h4 {
  padding-left: 10px;
}

.rank-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rank-list .rank-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rank-list li span {
  display: inline-block;
  font-size: 14px;
  width: 20px;
  height: 20px;

  margin-right: 10px;

  border-radius: 50%;
  text-align: center;
  line-height: 20px;
}

.top3 {
  color: white;
  background-color: #09b3f7;
}
</style>
